<template>
	<view class="app-discuss-info" :style="[AppSkinVar]">
		<view class="app-discuss-info__body">
			<view class="app-discuss-info__body-title e-font-32 fw-500 ">
				<text>{{info.title}}</text>
			</view>
			<view class="app-discuss-info__body-text">
				<rich-text :nodes="richText"></rich-text>
			</view>
		</view>
		<view class="app-discuss-info__evaluation">
			<view class="app-discuss-info__evaluation-title e-flex">
				<text class="e-font-32 e-m-r-12 fw-500">{{$t('discuss.allEvaluation')}}</text>
				<text class="c-red fw-500" v-if="info.commentNumber">{{info.commentNumber}}</text>
			</view>
			<evaluationItem v-for="(item,index) in evaluationList" :key="item.id" :info="item" :isLogin="isLogin" @setEvaluationState="setEvaluationState(index)"></evaluationItem>
			<empty paddingTop="120rpx" :text="$t('discuss.empty')" :icon="$staticPath('default_img.png')"
				:show="!evaluationList.length"></empty>
			<load-more v-if="evaluationList.length" :showLoad="showLoad"></load-more>
		</view>
		<view class="app-discuss-info__bottom e-flex bg-white">
			<view class="e-flex-1 e-flex e-flex-between">
				<view class="app-discuss-info__bottom-input e-flex" @tap="openEvaluationPopup">
					<image src="../static/write.png" class="img-26 e-m-r-4">
					</image>
					<text class="c-secondary e-font-26">{{$t('discuss.write')}}</text>
				</view>
				<view class="e-flex">
					<view class="img-48 e-rela e-m-r-60">
						<view class="app-discuss-info__bottom-badge e-abso" v-if="info.likeNumber">
							<text class="c-red e-font-20">{{getNumberUnit(info.likeNumber)}}</text>
						</view>
						<image src="../static/thumbs_active.png" class="img-48" @tap="editDiscussState(2)" v-if="info.hasLike"></image>
						<image src="../static/thumbs.png" class="img-48" @tap="editDiscussState(1)" v-else></image>
					</view>
					<view class="img-48 e-rela e-m-r-60">
						<view class="app-discuss-info__bottom-badge e-abso" v-if="info.commentNumber">
							<text class="c-red e-font-20">{{getNumberUnit(info.commentNumber)}}</text>
						</view>
						<image src="../static/msg.png" class="img-48"></image>
					</view>
					<view class="img-48">
						<image src="../static/share.png" class="img-48"></image>
					</view>
				</view>
			</view>
		</view>
		<e-popup overlayOpacity="0" mode="bottom" :show="show" @close="show = false">
			<view class="bg-white e-p-26 e-flex">
				<view class="e-m-r-22 e-flex-1">
					<e-input v-model="evaluationText" :placeholder="$t('discuss.write')" shape="circle"
						border="none" :customStyle="customInputStyle" @confirm="postEvaluation">
					</e-input>
				</view>
				<view class="app-discuss-info__btn">
					<e-button type="primary" :text="$t('discuss.post')" shape="circle" @click="postEvaluation">
					</e-button>
				</view>
			</view>
		</e-popup>
	</view>
</template>

<script lang="ts" setup>
	import { ref,computed } from 'vue'
	import {
		useCurrentInstance
	} from '@/common/hooks'
	import { useUser } from '@/common/stores'
		import { storeToRefs } from 'pinia'
		import {
			onLoad,
			onReachBottom
		} from '@dcloudio/uni-app'
	import {
		getDiscussInfo,
		getDiscussEvaluation,
		postAddDiscussLike,
		postDelDiscussLike,
		postAddDiscussEvaluation 
	} from '@/common/request/api'
	import evaluationItem from './child/evaluation-item.vue'
	const ctx = useCurrentInstance()
	
	const userStore = useUser()
	const { isLogin } = storeToRefs(userStore)
	const props = defineProps<{
		id ?: string|number
	}>()
	
	
	const richText = computed(() => {
		return info.value.content ? info.value.content.replace(/\<img/gi,
			'<img style="max-width:100%;height:auto;display: block;" ') : ''
	})
	
	const id = ref()
	const info = ref({})
	const evaluationList = ref([])
	const isGet = ref(true)
	const showLoad = ref(false)
	const pageNum = ref(1)
	const customInputStyle = ref({
					background: '#F4F4F4',
					borderRadius: '62rpx',
					paddingLeft: '38rpx',
					height: '72rpx'
				})
	const evaluationText = ref("")
	const show = ref(false)
	
	const getInfo = () => {
		getDiscussInfo(props.id).then(res => {
			info.value = res.data
			let title = info.value.title
			if (title.length > 10) {
				title = title.slice(0, 10)
			}
			uni.setNavigationBarTitle({
				title
			})
		})
	}
	const getData = (isRefresh?:boolean) => {
		if (isGet.value && !showLoad.value) {
			let data = {
				pageNum:pageNum.value,
				pageSize: 10,
			}
			showLoad.value = true
			getDiscussEvaluation(id.value, data).then(res => {
				showLoad.value = false
				if (res.code == 200) {
					if (isRefresh) {
						evaluationList.value = []
					}
					let loadRes = ctx.$pageLoad(evaluationList.value, res.rows, pageNum, 10)
					pageNum.value = loadRes.pageNo
					if (evaluationList.value.length == res.total) {
						isGet.value = false
					}
				}
			})
		}
	}
	const getNumberUnit = (num) => {
		if (num > 10000) {
			return `${ctx.$accDiv(num,10000)}w`
		}
		return num
	}
	const editDiscussState = (type:number) => {
		if (isLogin) {
			let api = type === 1 ? postAddDiscussLike : postDelDiscussLike
			api(id.value).then(res => {
				if (res.code === 200) {
					getInfo()
				}
			})
		} else {
			ctx.$goLogin({
				isShowModal: false
			})
		}
	
	}
	const openEvaluationPopup = () => {
		if (isLogin) {
			show.value = true
		} else {
			ctx.$goLogin({
				isShowModal: false
			})
		}
	}
	const postEvaluation = () => {
		postAddDiscussEvaluation({
			content: evaluationText.value,
			forumId: id.value
		}).then(res => {
			if (res.code === 200) {
				show.value = false
				evaluationText.value = ''
				getInfo()
				isGet.value = true
				showLoad.value = false
				pageNum.value = 1
				getData(true)
			}
		})
	}
	const setEvaluationState = (index:number) => {
		
			let data = evaluationList.value[index]
			data.hasLike = !data.hasLike
			data.likeNumber+=(data.hasLike ? 1 : -1)
			evaluationList.value.splice(index,1,data)
		
	}
	
	
	
	onLoad(() => {
		id.value = props.id
		getInfo()
		getData()
	})
	onReachBottom(() => {
		getData()
	})
	
</script>
<style>
	page {
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	.app-discuss-info {
		padding-bottom: 140rpx;

		&__body {
			padding: 78rpx 40rpx 40rpx 40rpx;

			&-title {
				text-indent: 18rpx;
				margin-bottom: 60rpx;
			}

			&-text {
				min-height: 500rpx;
			}
		}

		&__evaluation {
			&-title {
				padding: 34rpx 30rpx;
			}
		}

		&__bottom {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			height: 120rpx;
			padding: 0 28rpx;

			&-input {
				width: 370rpx;
				padding: 22rpx 0 22rpx 32rpx;
				background: #F4F4F4;
				border-radius: 62rpx;
			}

			&-badge {
				right: -16rpx;
				top: -12rpx;
			}
		}
		&__btn{
			width: 128rpx;
		}
	}
</style>
